import React, { Component } from 'react'
import { TopNavHeader, HintMessage } from '../common'

export default class ExperienceTicket extends Component {
  render() {
    return (
      <div className={`rt-experience-ticket-container cm-flex-container`}>
        <TopNavHeader title="体验券" />
        <div className={`cm-tab-switch-box`}>
          <span className={`cm-active`}>我的体验券</span>
          <span>领取体验券</span>
        </div>
        <HintMessage text="体验券：3张" extraText="使用规则" />
        <div className={`rt-experience-ticket-list`}>
          {
            [null, '', 'rt-already-used', 'rt-expired', 'rt-already-receive'].map(v => (
              <div key={Math.random()} className={`rt-experience-ticket ${v === null ? '' : v}`}>
                <div className={`rt-title-box`}>8元白银体验券</div>
                <div className={`rt-deadline-box`}>有效期2016年6月30日至2016年6月30日</div>
                <div className={`cm-half-circle cm-left-circle`}></div>
                <div className={`cm-half-circle cm-right-circle`}></div>
                <span className={`rt-btn`}>{v === null ? '立即下单' : (v === '' ? '立即领取'  : v)}</span>
                <div className={`rt-img-box`}></div>
              </div>
            ))
          }

          <div className={`rt-experience-ticket rt-already-receive`}>
            <div className={`rt-title-box`}>8元白银体验券</div>
            <div className={`rt-deadline-box`}>有效期2016年6月30日至2016年6月30日</div>
            <div className={`cm-half-circle cm-left-circle`}></div>
            <div className={`cm-half-circle cm-right-circle`}></div>
            <div className={`rt-img-box`}></div>
          </div>
        </div>
      </div>
    )
  }
}